<template>
    <splitpanes class="default-theme" @resize="paneSize = $event[0].size" style="height: calc(100vh - 95px)">
        <pane :size="16">
            <GroupTree ref="groupTreeRef" @nodeClick="onNodeClick" />
        </pane>
        <pane :size="84">
            <div class="table-box">
                <ProTable ref="proTable" :requestApi="api.getList" :pagination="false" :initParam="initParam"
                    :initData="false" :columns="columns">
                    <!-- 表格 header 按钮 -->
                    <template #tableHeader="scope">
                        <el-button type="primary" :icon="CirclePlus" @click="openDialog('新增')">新增</el-button>
                        <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected"
                            @click="onBatchRemove(scope.ids)">
                            批量删除
                        </el-button>
                    </template>
                    <!-- Expand -->
                    <template #expand="scope">
                        {{ scope.row }}
                    </template>
                    <!-- 表格操作 -->
                    <template #operation="scope">
                        <el-button type="primary" link :icon="View" @click="openDialog('查看', scope.row)">查看</el-button>
                        <el-button type="primary" link :icon="EditPen"
                            @click="openDialog('编辑', scope.row)">编辑</el-button>
                        <el-button type="primary" link :icon="EditPen"
                            @click="openDesignWin(scope.row)">设计</el-button>
                        <el-button type="primary" link :icon="Delete" @click="onRemove(scope.row)">删除</el-button>
                    </template>
                </ProTable>
                <FormDialog ref="formDialogRef"></FormDialog>
            </div>
        </pane>
    </splitpanes>

</template>

<script setup lang="tsx" name="definition">

import { ref, reactive } from "vue";
import { CirclePlus, Delete, EditPen, View } from "@element-plus/icons-vue";

import { useHandleData } from "/@/hooks/useHandleData";
import GroupTree from './components/GroupTree.vue';
import FormDialog from "./components/FormDialog.vue";
import { Session } from '/@/utils/storage';
import * as api from "/@/api/workflow/definition";
import columnsFunction from './columns';
import ProTable from "/@/components/ProTable/index.vue";
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();
const paneSize = ref(50);
// 获取表头信息
const columns = columnsFunction();

const initParam = reactive({
    groupId: '',
});

const group = ref<any>({});

// 删除用户信息
const onRemove = async (params: any) => {
    await useHandleData(api.remove, { id: params.id }, `删除【${params.name}】`);
    proTable.value.refresh();
};

//流程设计
const openDesignWin = (row: any) => {
    window.open(`${import.meta.env.VITE_FLOW_URL}?uuid=${row.templateUuid}&token=${Session.get('token')}`)
}

// 批量删除用户信息
const onBatchRemove = async (ids: string[]) => {
    await useHandleData(api.remove, { ids }, "删除所选信息");
    proTable.value.refresh();
};

const onNodeClick = (row: any) => {
    initParam.groupId = row.id;
    group.value = row;
    proTable.value.refresh();
}

// 打开 dialog(新增、查看、编辑)
interface FormDialogExpose {
    acceptParams: (params: any) => void;
}
const formDialogRef = ref<FormDialogExpose>();
const openDialog = (title: string, rowData = {}) => {
    let params = {
        title: title,
        rowData: { ...rowData, groupId: group.value.id, deptId: group.value.deptId, groupName: group.value.name },
        isView: title === "查看" ? true : false,
        apiUrl: title === "新增" ? api.add : title === "编辑" ? api.edit : "",
        getTableList: proTable.value.refresh
    };
    formDialogRef.value!.acceptParams(params);
};
</script>
